<script setup lang="ts">
const { t } = useI18n()

const menuItems = computed(() => ([
  { title: t('menus.dialog'), route: 'dialog' },
  { title: t('menus.location'), route: 'location' },
  { title: t('menus.navigation'), route: 'navigation' },
  // { title: t('menus.mockGuide'), route: 'mock' },
  // { title: t('menus.echartsDemo'), route: 'charts' },
  // { title: t('menus.unocssExample'), route: 'unocss' },
  // { title: t('menus.persistPiniaState'), route: 'counter' },
  // { title: t('menus.keepAlive'), route: 'keepalive' },
  // { title: t('menus.404Demo'), route: 'unknown' },
]))

const checked = ref<boolean>(isDark.value)

watchEffect(() => {
  checked.value = isDark.value
})
</script>

<template>
  <van-cell-group :title="t('menus.exampleComponents')" :border="false" :inset="true">
    <template v-for="item in menuItems" :key="item.route">
      <van-cell :title="item.title" :to="item.route" is-link />
    </template>
  </van-cell-group>
</template>

<route lang="json5">
{
  name: 'home',
  meta: {
    title: '主页',
    i18n: 'menus.home'
  },
}
</route>
